<!DOCTYPE html>
<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>jQurey画线条</title>
 <script type ="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
 <style type = "text/css">
  body{
  /*background:#000000;*/
  }
  #fa{
  width:400px;
  height:400px;
  margin:100px auto;
  /*background:#4b4b4b;*/
  background-image:url(http://mpic.tiankong.com/fa1/fff/fa1fff9f578b8b725ae9ef695b51437e/1p-1693.jpg);
  background-repeat:no-repeat; /*设置背景图片是否重复平铺*/
  /*background-position:center;*/
  background-position:-130px -50px;
  background-color: #000000;
  position: relative;
  }

 </style>
 <script type = "text/javascript">
  $(function(){
        var table = document.createElement("table");
        // var tbody = document.createElement("tbody");
        // table.style.borderCollapse = "collapse";     //相邻边被合并 
    
        var text = document.createTextNode("");
        for (var i=1;i<3;i++){
            var td = document.createElement("td");
            td.style.border = "5px solid #000";
            td.style.padding = "50px";
            td.appendChild(text);
            table.appendChild(td);
            table.style.position = "absolute";
            table.style.top=50*i + "px";
            table.style.left=50*i + "px";
        }
        document.getElementById("fa").appendChild(table);
  })
 </script>
 </head>
 <body>
 <input type = "button" value = "11111" id = "test"/>
 <div id = "fa"></div>
 </body>
</html>